<template>
    <div class="home">
        <div class="content">
            <h2 class="title">表格</h2>
            <div id="tableBox">
                <SclTable 
                    :columns="tableColumn"
                    :list="tableData"
                    :total="20"
                >
                </SclTable>
                <!-- <Table 
                    :columns="tableColumn"
                    :list="tableData"
                    :total="20"
                >
                </Table> -->
            </div>
        </div>
    </div>
</template>

<script>
import Table from '@/components/table.vue';
import Tree from '@/components/tree.vue';
import SclTable from '@/components/sclTable.vue'

export default {
    name: 'Home',
    data() {
        return {
            // 表格配置
            tableColumn: [
                { type: 'checkBox' },
                { type: 'index' },
                { type: 'pt', prop: 'name', label: '姓名', type: 'link' },
                { type: 'pt', prop: 'age', label: '年龄' },
                { 
                    type: 'propCode',
                    prop: 'sex', 
                    label: '性别',
                    codeName: [
                        { auth: 0, label: '女' },
                        { auth: 1, label: '男' },
                        { auth: 3, label: '应该是男的吧' },
                    ]
                },
                { type: 'pt', prop: 'say', label: '口头禅' },
                { 
                    type: 'level',
                    prop: 'fenji', 
                    label: '分级表头（一级）',
                    children: [
                        {
                            type: 'level',
                            prop: 'fenji1', 
                            label: '分级表头（二级）',
                            children: [
                                {
                                    type: 'level',
                                    prop: 'fenji2', 
                                    label: '分级表头（三级）',
                                }
                            ] 
                        },
                        {
                            type: 'level',
                            prop: 'fenji1-2', 
                            label: '分级表头（二级）',
                            children: [
                                {
                                    type: 'level',
                                    prop: 'fenji2-2', 
                                    label: '分级表头（三级）',
                                }
                            ] 
                        }
                    ] 
                },
                { 
                    label: '操作项', 
                    type: 'operation',
                    operation: [
                        { auth: 'update', authText: '编辑' },
                        { auth: 'delete', authText: '删除' },
                        { auth: 'detail', authText: '查看' }
                    ] 
                }
            ],

            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    age: 29,
                    sex: 1,
                    address: '上海市普陀区金沙江路 1518 弄',
                    fenji2: 'pppppppp',
                    'fenji2-2': '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    date: '2016-05-04',
                    name: '王大虎',
                    age: 39,
                    sex: 1,
                    address: '上海市普陀区金沙江路 1517 弄'
                }, 
                {
                    date: '2016-05-01',
                    name: '王二虎',
                    age: 49,
                    sex: 0,
                    address: '上海市普陀区金沙江路 1519 弄'
                }, 
                {
                    date: '2016-05-03',
                    name: '王三虎',
                    age: 19,
                    sex: 3,
                    address: '上海市普陀区金沙江路 1516 弄'
                },
                   {
                    date: '2016-05-02',
                    name: '王小虎',
                    age: 29,
                    sex: 1,
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    date: '2016-05-04',
                    name: '王大虎',
                    age: 39,
                    sex: 1,
                    address: '上海市普陀区金沙江路 1517 弄'
                }, 
                {
                    date: '2016-05-01',
                    name: '王二虎',
                    age: 49,
                    sex: 0,
                    address: '上海市普陀区金沙江路 1519 弄'
                }, 
                {
                    date: '2016-05-03',
                    name: '王三虎',
                    age: 19,
                    sex: 3,
                    address: '上海市普陀区金沙江路 1516 弄'
                },
                   {
                    date: '2016-05-02',
                    name: '王小虎',
                    age: 29,
                    sex: 1,
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    date: '2016-05-04',
                    name: '王大虎',
                    age: 39,
                    sex: 1,
                    address: '上海市普陀区金沙江路 1517 弄'
                }, 
                {
                    date: '2016-05-01',
                    name: '王二虎',
                    age: 49,
                    sex: 0,
                    address: '上海市普陀区金沙江路 1519 弄'
                }, 
                {
                    date: '2016-05-03',
                    name: '王三虎',
                    age: 19,
                    sex: 3,
                    address: '上海市普陀区金沙江路 1516 弄'
                },
                   {
                    date: '2016-05-02',
                    name: '王小虎',
                    age: 29,
                    sex: 1,
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    date: '2016-05-04',
                    name: '王大虎',
                    age: 39,
                    sex: 1,
                    address: '上海市普陀区金沙江路 1517 弄'
                }, 
                {
                    date: '2016-05-01',
                    name: '王二虎',
                    age: 49,
                    sex: 0,
                    address: '上海市普陀区金沙江路 1519 弄'
                }, 
                {
                    date: '2016-05-03',
                    name: '王三虎',
                    age: 19,
                    sex: 3,
                    address: '上海市普陀区金沙江路 1516 弄'
                },
                   {
                    date: '2016-05-02',
                    name: '王小虎',
                    age: 29,
                    sex: 1,
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    date: '2016-05-04',
                    name: '王大虎',
                    age: 39,
                    sex: 1,
                    address: '上海市普陀区金沙江路 1517 弄'
                }, 
                {
                    date: '2016-05-01',
                    name: '王二虎',
                    age: 49,
                    sex: 0,
                    address: '上海市普陀区金沙江路 1519 弄'
                }, 
                {
                    date: '2016-05-03',
                    name: '王三虎',
                    age: 19,
                    sex: 3,
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ],

            treeData: [
                {
                    id: 1,
                    label: '一级 1',
                    children: [
                        {
                            id: 4,
                            label: '二级 1-1',
                            children: [
                                {
                                    id: 9,
                                    label: '三级 1-1-1'
                                }, 
                                {
                                    id: 10,
                                    label: '三级 1-1-2'
                                }
                            ]
                        }
                    ]
                },
                {
                    id: 2,
                    label: '一级 2',
                    children: [
                        {
                            id: 5,
                            label: '二级 2-1'
                        },
                        {
                            id: 6,
                            label: '二级 2-2'
                        }
                    ]
                },
                {
                id: 3,
                    label: '一级 3',
                    children: [
                        {
                            id: 7,
                            label: '二级 3-1'
                        },
                        {
                            id: 8,
                            label: '二级 3-2'
                        }
                    ]
                }
            ], 

            treeProps: {
                label: 'label', children: 'children'
            }
        }
    },
    components: { Table, Tree, SclTable }
}
</script>

<style scoped lang="scss">
.home {

    .content {
        background: #fff;
        height: 100vh;
        width: 1600px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;

        .title {
            height: 400px;
            background: pink;
        }

        #tableBox {
            width: 100%;
            flex: 1;
            border: 4px solid red;
            margin-top: 20px;
        }

        .loading-content {
            width: 400px;
            height: 400px;
            border: 2px solid;
            margin: 0 auto;
        }

        .treeBox {
            height: 600px;
            border: 5px solid #000;
        }
    }
}
</style>
